import React, { useContext, useRef } from 'react';
import { Line } from '@ant-design/plots';
import { Card } from 'antd';
import ShowMoreAnalysis from './showMoreAnalysis';

interface ForecastData {
  date: string;
  value: number;
  type: string;
}

interface Props {
  data: ForecastData[];
  from?: string;
}

const VisForecastReport: React.FC<Props> = ({ data }) => {
  const chartRef = useRef<ChartRef>(null);
  const forecastData = data?.data ? JSON.parse(data?.data) : data ?? [];
  const trainData = forecastData?.map(item => ({
    date: item.date,
    value: item.train ?? '--',
    type: item.metric_name ?? '度量名'
  }));
  const testData = forecastData.map(item => ({
    date: item.date,
    value: item.test ??  '--',
    type: '预测范围实际_'+item.metric_name ?? '度量名'
  }));
  const arimaData = forecastData.map(item => ({
    date: item.date,
    value: item.arima ??  '--',
    type: '预测值'
  }));
  const list = trainData.concat(testData).concat(arimaData)

  const config = {
    data: list ?? [],
    xField: 'date',
    yField: 'value',
    colorField: 'type',
    axis: {
      y: {
        labelFormatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
    scale: { color: { range: ['#1f77b4','#FAAD14', '#30BF78'] } }
  };

  return (
    <Card className="rounded-lg shadow-sm">
      <div className="space-y-4">
        <h3 className="text-lg font-medium">预测分析</h3>
        <Line {...config} height={400} />
      </div>
      <div className="flex justify-end">
        <ShowMoreAnalysis type={'forecast'} data={data} />
      </div>
    </Card>
  );
};

export default VisForecastReport;